<template>
  <div v-bind:class=this.class>
    <header>
    <div style="overflow: hidden">
      <div style="float: left;overflow: hidden;margin-top: 15px;margin-left: 30px">
        <div style="float: left" ><img src="../../public/zymImage/login-1.png" height="31" width="31"/></div>
        <div style="color: white;float: left;font-size: 25px;font-weight: bolder;">米豆云
          <span style="font-size: 20px;margin-left: -10px">1.0</span>
          <span style="margin-left: 15px;font-size: 15px">餐饮管理系统</span>
        </div>
      </div>
      <div  style="float: right;margin-top: 15px;margin-right:35px">
        <div  style="color: white;font-size: 20px;font-weight: bolder">
          MIDOU米豆
        </div>
      </div>
      <div>

      </div>
    </div>
    </header>
    <section>
      <div>
        <div >
          <div style="color: white;margin-left: 770px;margin-top:190px;font-size: 80px;height: 130px"><h1>米豆云</h1></div>
          <div><span style="font-size: 20px; margin-left: 830px;color: white;font-weight: bold">全新B/S架构,连锁餐饮管理系统</span></div>
        </div>
      </div>
      <div style="overflow: hidden">
        <div style="float: left">
          <a href="#" @click="lbt" >
            <img style="width: 50px;height: 50px" src="../../public/zymImage/箭头-1.png" height="200" width="200"/>
          </a>
        </div>
        <div style="float: right">
          <a href="#" @click="lbt">
            <img style="width: 50px;height: 50px" src="../../public/zymImage/箭头.png" height="200" width="200"/>
          </a>
        </div>
        <div id="lb">
          <router-link class="router" to="">
            <div>
              <div></div>
              <span>总部系统</span>
            </div>
          </router-link>
          <router-link class="router"  to="/">
            <div @click="prompt">
              <div></div>
              <span>供应链系统</span>
            </div>
          </router-link >
            <router-link class="router" to="/register">
            <div>
              <div></div>
              <span>注册系统</span>
            </div>
            </router-link >
              <router-link class="router" to="/login">
                <div>
                  <div></div>
                  <span>门店后台</span>
                </div>
              </router-link >
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      i:0,
      class:'hello1',
    }
  },mounted() {
    setInterval(()=>{
     this.i++;
     if(this.i>2){
       this.i=1;
     }
      if(this.i==1){
        this.class='hello1'
      }else {
        this.class='hello2'
      }
    },2000)
  },
  methods:{
    prompt(){
      alert('敬请期待');
    },
    lbt(){
      this.i++;
      if(this.i>2){
        this.i=1;
      }
      if(this.i==1){
        this.class='hello1'
      }else {
        this.class='hello2'
      }
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  *{
    margin: 0px;
    padding: 0px;
  }
  .hello1{
    background: url("../../public/zymImage/page02.png") no-repeat;
    background-size: cover;
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
  .hello2{
    background: url("../../public/zymImage/page03.png") no-repeat ;
    background-size: cover;
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
  #lb{
    margin-top: 90px;
    margin-left: 380px;
  }
  #lb{
    cursor: pointer;
  }
  #lb>.router>div>div{
    margin-top: 5px;
  }
  #lb>.router:nth-of-type(1)>div>div{
    width: 80px;
    height: 90px;
    background: url("../../public/zymImage/总部系统2.png") no-repeat ;
  }
  #lb>.router:nth-of-type(1)>div>div:hover{
    background: url("../../public/zymImage/总部系统.png") no-repeat;
  }
  #lb>.router:nth-of-type(1):hover{
    color: #ff8206;
  }
  #lb>.router:nth-of-type(2):hover{
    color: #ff8206;
  }
  #lb>.router:nth-of-type(3):hover{
    color: #ff8206;
  }
  #lb>.router:nth-of-type(4):hover{
    color: #ff8206;
  }
  #lb>.router:nth-of-type(2)>div>div{
    width: 80px;
    height: 90px;
    background: url("../../public/zymImage/供应链系统2.png") no-repeat ;
  }
  #lb>.router:nth-of-type(2)>div>div:hover{
    background: url("../../public/zymImage/供应链系统.png") no-repeat;
    color: red;
  }
  #lb>.router:nth-of-type(3)>div>div{
    width: 80px;
    height: 90px;
    background: url("../../public/zymImage/会员系统2.png") no-repeat ;
  }
  #lb>.router:nth-of-type(3)>div>div:hover{
    background: url("../../public/zymImage/会员系统.png") no-repeat;
    color: red;
  }
  #lb>.router:nth-of-type(4)>div>div{
    width: 80px;
    height: 90px;
    background: url("../../public/zymImage/门店后台2.png") no-repeat ;
  }
  #lb>.router:nth-of-type(4)>div>div:hover{
    background: url("../../public/zymImage/门店后台.png") no-repeat;
    color: red;
  }
  #lb>.router{
    margin-left: 180px;
    float: left;
    color: white;
    text-decoration: none;
  }
  .router span{
    font-size: 14px;
    font-weight: bold;
  }
</style>